<div id="user">
  <div class="head" [style.background-image]="headUrl"
      (mouseover)="headShow(1)" (mouseout)="headShow(0)">
    <div class="head-botton" [style.display]="isHeadShow?'block':'none'" 
        (mouseover)="headShow(1)" (mouseout)="headShow(0)">
      <nz-upload class="avatar-uploader"
        nzAction="http://xcms.0715ym.com/admin/admin/update_user_head"
        nzName=""
        [nzShowUploadList]="false"
        [nzBeforeUpload]="beforeUpload"
        (nzChange)="handleChange($event)">
        <i *ngIf="!avatarUrl" class="anticon anticon-plus avatar-uploader-trigger"></i>
        <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">
      </nz-upload>
    </div>
  </div>
  <div style="text-align: center;">
    <h1 style="text-transform: capitalize;">{{ name }}</h1>
    <h2>1365442566@qq.com</h2>
    <h2>登录时间：{{ onTime }}</h2>
  </div>
  <div class="info" style="text-align: center;">
    <div>
      <h3>{{ loginAmount }}</h3>
      <h2>登录</h2>
    </div>
    <div >
      <h3>10</h3>
      <h2>消息</h2>
    </div>
    <div >
      <h3>{{ logCount }}</h3>
      <h2>日志</h2>
    </div>
  </div>
</div>

<div id="tabs">
  <div class="tab">
    <div class="tab-header tab-action" [routerLink]="['log']" routerLinkActive="tab-action">
      日志
    </div>
    <div class="tab-header" [routerLink]="['info']" routerLinkActive="tab-action">
      用户信息
    </div>
  </div>
  <div class="tab-body">
    <router-outlet></router-outlet>
  </div>
</div>


